<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>ScarletsFrame-"non-keyed"</title>
  <link href="/css/currentStyle.css" rel="stylesheet"/>
</head>
<body>
  <sf-m name="bench-mark">
    <div class="container">
      <div class="jumbotron">
        <div class="row">
          <div class="col-md-6">
            <h1>ScarletsFrame-"non-keyed"</h1>
          </div>
          <div class="col-md-6">
            <div class="row">
              <div class="col-sm-6 smallpad">
                <button type='button' class='btn btn-primary btn-block' id='run' @click='b_run()'>Create 1,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type='button' class='btn btn-primary btn-block' id='runlots' @click='b_runlots()'>Create 10,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type='button' class='btn btn-primary btn-block' id='add' @click='b_add()'>Append 1,000 rows</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type='button' class='btn btn-primary btn-block' id='update' @click='b_update()'>Update every 10th row</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type='button' class='btn btn-primary btn-block' id='clear' @click='b_clear()'>Clear</button>
              </div>
              <div class="col-sm-6 smallpad">
                <button type='button' class='btn btn-primary btn-block' id='swaprows' @click='b_swaprows()'>Swap Rows</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <table class="table table-hover table-striped test-data">
        <tbody id="tbody">
            <tr sf-repeat-this="x in list" class="{{ x.selected ? 'danger' : '' }}">
              <td class="col-md-1">{{ x.id }}</td>
              <td class="col-md-4">
                <a class="lbl" @click="b_select(x)">{{ x.label }}</a>
              </td>
              <td class="col-md-1">
               <a class="remove" @click="b_remove(x)">
                 <span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span>
               </a>
              </td>
              <td class="col-md-6"></td>
            </tr>
        </tbody>
      </table>
      <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
    </div>
  </sf-m>
  <script src='dist/main.js'></script>
</body>
</html>
